<template>
    <div class="login">
        <el-form ref="loginForm" size="medium" :model="loginForm" class="login-form" label-width="68px">
            <h3 class="title">模拟工作平台</h3>
            <el-form-item label="用户名：">
                <el-col :span="22">
                    <el-input v-model="loginForm.userName" type="text"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="密码：">
                <el-col :span="22">
                    <el-input placeholder="请输入密码" v-model="loginForm.passWord" show-password></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="验证码：">
                <el-col :span="15">
                    <el-input v-model="loginForm.verificationCode" type="text"/>
                </el-col>
                <el-col :span="5">
                    <img  @click="replace" id="img" :src="verfy"/>
                </el-col>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button
                        type="primary"
                        size="medium"
                        @click="submitForm"
                        style="width: 40%">
                    <span>登 录</span>
                </el-button>
                <el-button
                        type="primary"
                        size="medium"
                        @click="register"
                        style="width: 40%">
                    <span>修改密码</span>
                </el-button>
            </el-form-item>
        </el-form>


        <!-- 添加或修改参数配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
                <el-form-item label="账户名" prop="userName">
                    <el-input v-model="form.userName"/>
                </el-form-item>
                <el-form-item label="邮箱号" prop="myeMail">
                    <el-input v-model="form.myeMail"/>
                </el-form-item>
                <el-form-item label="验证码：" prop="emailCode">
                    <el-col :span="15">
                        <el-input v-model="form.emailCode"/>
                    </el-col>&nbsp;&nbsp;
                    <el-popconfirm
                            @confirm="countdown"
                            confirm-button-text='是'
                            cancel-button-text='否'
                            icon="el-icon-info"
                            icon-color="red"
                            title="是否发送验证码？"
                    >
                        <el-button v-show="show" slot="reference">发送</el-button>
                        <el-button v-if="!show" class="count" slot="reference">{{count}}s</el-button>
                    </el-popconfirm>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input show-password v-model="form.newPassword"/>
                </el-form-item>
                <el-form-item label="再次输入新密码" prop="newPassword1">
                    <el-input show-password v-model="form.newPassword1"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updatepassword">确 定</el-button>
                <el-button @click="close">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {login,updateuser} from "@/api/login";
    import {getEmailCode} from "@/api/system";
    export default {

        name: 'login',
        data() {
            // 判断银行卡账户是否正确
            var validatorAccountNumber = (rule, value, callback) => {
                if (this.form.newPassword != this.form.newPassword1) {
                    callback(new Error("第一次输入的密码与第二次的不一样"));
                } else {
                    callback();
                }
            };
            return {
                show: true,
                count: '',
                timer: null,
                verfy: "",
                open: false,
                title: '密码修改',
                loading: false,
                form: {
                    userName: null,
                    myeMail:null,
                    emailCode:null,
                    newPassword:null,
                    newPassword1:null
                },
                loginForm: {
                    userName: null,
                    passWord: null,
                    verificationCode: null,
                },
                rules: {
                    userName: [
                        {required: true, message: "请输入用户名", trigger: "blur"}
                    ],
                    newPassword: [
                        {required: true, message: "请输入新密码", trigger: "blur"},
                        {validator: validatorAccountNumber, trigger: "blur"}
                    ],
                    newPassword1: [
                        {required: true, message: "请输入第二次新密码", trigger: "blur"},
                        {validator: validatorAccountNumber, trigger: "blur"}
                    ],
                    emailCode:[
                        {required: true, message: "请输入验证码", trigger: "blur"},
                    ],
                },
            }
        },
        mounted(){
            this.replace();
        },
        methods: {
            getCode(){
                let query={
                    userName: this.form.userName,
                    myeMail:this.form.myeMail,
                }
                if(this.form.userName!=null||this.form.myeMail!=null){
                    const reg = /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                    if (!reg.test(this.form.myeMail)) {
                        this.msgError('请填写正确的邮箱');
                    }else {
                        getEmailCode(query).then(response=>{
                            if(response.code==0){
                                this.msgSuccess("发送成功");
                                this.countdown();
                            }else{
                                this.msgError(response.msg);
                            }
                        });
                    }
                }else{
                    this.msgError("请输入用户名和邮箱号");
                }
            },
            countdown(){
                const TIME_COUNT = 60;
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    }, 1000)
                }
            },
            replace(){
                /*加个时间戳为了防止浏览器对同一个请求进行缓存导致不访问后台直接返回数据*/
                var timestamp=new Date().getTime();
                let uri = "/system/getVerify?time="+timestamp;
                document.getElementById("img").src=uri;
            },

            /**  */
            register: function () {
                this.open = true;
                this.resetQuery();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("form");
            },
            close() {
                this.open = false;
                this.resetQuery();
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs["loginForm"].validate(valid => {
                    if (valid) {
                        login(this.loginForm).then(response => {
                            if (response.code == 0) {
                                this.msgSuccess("登录成功");
                                sessionStorage.setItem('permissionButton', response.data);
                                sessionStorage.setItem('user', this.loginForm.userName);
                                this.$router.push({
                                    path: "/layout",
                                })
                            } else {
                                this.msgError(response.msg);
                            }
                        }).catch(err => {
                            this.$message.error(err.message);
                        });
                    }
                });
            },
            /** 提交按钮 */
            updatepassword: function () {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.form.flag=1;
                        updateuser(this.form).then(response => {
                            if(response.code==0){
                                this.msgSuccess("修改成功");
                                this.open = false;
                            }else{
                                this.msgError(response.msg);
                            }
                        }).catch(err => {
                            this.$message.error(err.message);
                        });
                    }
                });
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @import "../assets/style/login.css";
</style>
